<template>
    <div class="container">
        <div class="chinaEcharts" ref="chinaEchartsEL"></div>
    </div>
</template>

<script setup lang="ts">
// import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';



// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";

/** 引入柱状图and折线图图表，图表后缀都为 Chart  */
import { BarChart, LineChart, PieChart, MapChart } from "echarts/charts";

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LegendComponent,
    GeoComponent,
    VisualMapComponent
} from "echarts/components";

// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";

// 注册必须的组件
echarts.use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    TransformComponent,
    LegendComponent,
    GeoComponent,
    VisualMapComponent,
    BarChart,
    LabelLayout,
    UniversalTransition,
    CanvasRenderer,
    LineChart,
    PieChart,
    MapChart
]);



import chinaJSON from './chinaJSON.json'
const chinaEchartsEL = ref()

const planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z'

echarts.registerMap('china', (chinaJSON as any))

const chinaEchartsFun = () => {
    const chinaEcharts = echarts.init(chinaEchartsEL.value)

    const lineStyle = {
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#3284bb' // 0% 处的颜色
            }, {
                offset: 0.5, color: '#ee6666' // 100% 处的颜色
            }, {
                offset: 1, color: '#3284bb' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },
        width: 1
    }

    const coordsList = [
        [
            [116.405285, 39.904989],
            [91.132212, 29.660361]
        ], [
            [91.132212, 29.660361],
            [116.405285, 39.904989],
        ],
        [
            [116.405285, 39.904989],
            [102.712251, 25.040609]
        ],
        [
            [116.405285, 39.904989],
            [101.778916, 36.623178]
        ],
        [
            [101.778916, 36.623178],
            [116.405285, 39.904989]
        ],
        [
            [104.065735, 30.659462],
            [87.617733, 43.792818]
        ],
        [
            [126.642464, 45.756967],
            [116.405285, 39.904989]
        ]
    ]

    const data: any = [] // 处理data数据
    coordsList.forEach(item => {
        data.push({ lineStyle, coords: item })
    })

    chinaEcharts.setOption({
        geo: [{
            map: 'china',
            roam: true,
            top: 0,
            left: 0,
            right: 0,
            scaleLimit: {
                min: 0.5,
                max: 1.5
            },
            label: {
                show: true,
                color: '#fff'
            },
            itemStyle: {
                areaColor: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#1daeb8' // 0% 处的颜色
                    }, {
                        offset: 0.5, color: '#22c4d5' // 100% 处的颜色
                    }, {
                        offset: 1, color: '#1abda5' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                }
            },
            emphasis: {
                itemStyle: {
                    areaColor: '#00fffa'
                },
                label: {
                    fontSize: 20,
                    color: '#007afe'
                }
            }
        }],
        series: [
            {
                type: 'lines',
                data,
                symbol: ['none', 'none'],
                symbolSize: 10,
                effect: {
                    show: true,
                    period: 5,
                    trailLength: 0,
                    symbol: planePath,
                    symbolSize: 15,
                },
                lineStyle: {
                    curveness: 0.2,
                }
            }
        ]
    })
}

onMounted(() => {
    chinaEchartsFun()
})

</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    flex: 2.5;
    margin: 0.5vw 0;

    .chinaEcharts {
        width: 100%;
        height: 100%;
    }
}
</style>